<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--添加视口-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--网页的名字-->
    <title>模谷云</title>
    <!--引入Bootscrap核心样式文件-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<!--    <link rel="stylesheet" href="lib/bootstrap.min.css">-->
    <!--你自己的样式或其他文件-->
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/draft_prompt.css" type="text/css">
    <link rel="stylesheet" href="css/selection.css" type="text/css">
    <link rel="stylesheet" href="css/Mouse_right_Message.css" type="text/css">
    <link rel="stylesheet" href="css/pull_tree.css" type="text/css">
    <link rel="stylesheet" href="css/shader.css" type="text/css">
    <!--站点图标-->
    <link rel="shortcut icon" href="imgs/mgy.png" type="image/x-icon">

</head>


<body>
<!--头部 导航条-->
<header id="mgy_header">
    <!--默认主题，静止在顶部     添加navbar-mgy实现自己的样式-->
    <nav class="navbar navbar-default navbar-static-top navbar-mgy">
        <!--显示logo的div-->
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!--保证在缩小框之后，login和share的内容还会显示-->
                <!--                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mgy_login_share" aria-expanded="false">-->
                <!--                    <span class="sr-only">Toggle navigation</span>-->
                <!--                    <span class="icon-bar"></span>-->
                <!--                    <span class="icon-bar"></span>-->
                <!--                    <span class="icon-bar"></span>-->
                <!--                </button>-->
                <a class="navbar-brand" href="#" id="logo">
                    <img src="imgs/new logo.png" alt="模谷云logo" width="100">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content foggling -->
            <div class="collapse navbar-collapse" id="mgy_login_share">
                <ul class="nav navbar-nav navbar-right">
                    <!--显示注册和分享的div-->
                    <li><a href="#">
                        <!--加载注册的logo-->
                        <img src="imgs/login.png" alt="注册" title="注册" height="25">
                    </a></li>
                    <li><a href="#">
                        <!--加载分享的logo-->
                        <img src="imgs/share.png" alt="分享" title="分享" height="25">
                    </a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <!--菜单栏-->
    <nav class="navbar navbar-default" id="main_menu">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" style="border-right: 1px solid #e0e0e0">
                <!--                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mgy_menu" aria-expanded="false">-->
                <!--                    <span class="sr-only">Toggle navigation</span>-->
                <!--                    <span class="icon-bar"></span>-->
                <!--                    <span class="icon-bar"></span>-->
                <!--                    <span class="icon-bar"></span>-->
                <!--                </button>-->
                <a class="navbar-brand" href="#" id="addFile">
                    <img src="fonts/添加文档.svg" alt="添加文档logo" width="32" height="32" title="添加文档">
                </a>
                <a class="navbar-brand" href="#">
                    <img src="fonts/全屏.svg" alt="全屏logo" width="25" height="25" title="全屏显示">
                </a>
                <a class="navbar-brand" href="#" id="download">
                    <img src="fonts/下载.svg" alt="下载logo" width="35" height="35" title="下载">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="mgy_menu">
                <ul class="nav navbar-nav navbar-left">
                    <li>
                        <a href="#" style="margin-top:-9px;">
                            <img src="imgs/ICO/草图.ico" alt="草图" width="20" height="20" title="草图" id="draft">
                            <p style="font-size:15px; margin-left: -5px;margin-top:2px;font-family: 楷体" id="wordOfDraft" >草图</p>
                        </a>
                    </li>

                    <li><a href="#" style="margin-top:-9px;">
                        <img src="imgs/ICO/拉伸.ico" alt="拉伸" width="20" height="20" title="拉伸">
                        <p style="font-size:15px; margin-left: -5px;margin-top:2px;font-family: 楷体">拉伸</p>
                    </a></li>
                    <li><a href="#" style="margin-top:-9px;">
                        <img src="imgs/ICO/旋转.ico" alt="选转" width="20" height="20" title="旋转">
                        <p style="font-size:15px; margin-left: -5px;margin-top:2px;font-family: 楷体">旋转</p>
                    </a></li>
                    <li><a href="#" style="margin-top:-9px;">
                        <img src="imgs/ICO/圆角.ico" alt="圆角" width="20" height="20" title="圆角">
                        <p style="font-size:15px; margin-left: -5px;margin-top:2px;font-family: 楷体">圆角</p>
                    </a></li>
                    <li><a href="#" style="margin-top:-9px;">
                        <img src="imgs/ICO/倒角.ico" alt="倒角" width="20" height="20" title="倒角">
                        <p style="font-size:15px; margin-left: -5px;margin-top:2px;font-family: 楷体">倒角</p>
                    </a></li>
                    <!--       几何库拉列表-->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="geometry">
                            <img src="imgs/ICO/方体.ico" alt="几何库" width="20" height="20">
                            <span class="caret"></span>
                            <p style="font-size:15px; margin-left: -5px;margin-top:2px;margin-bottom:-8px;font-family: 楷体">几何库</p>
                        </a>
                        <ul class="dropdown-menu" style=" height:150px;overflow: auto">
                            <li style="margin-top:-1px;margin-bottom: -5px"><a href="#">
                                <img src="imgs/圆柱体.png" alt="圆柱体" width="18" height="18" style="float: left">
                                <p style="font-family: 楷体;margin-bottom: -3px;margin-left: 30px">圆柱体</p>
                            </a></li>
                            <li role="separator" class="divider"></li>
                            <li style="margin-top:-1px;margin-bottom: -5px"><a href="#">
                                <img src="imgs/球体.png" alt="球体" width="18" height="18" style="float:left">
                                <p style="font-family: 楷体;margin-bottom: -3px;margin-left: 30px">球体</p>
                            </a></li>
                            <li role="separator" class="divider"></li>
                            <li style="margin-top:-1px;margin-bottom: -5px"><a href="#">
                                <img src="imgs/立方体.png" alt="立方体" width="18" height="18" style="float:left">
                                <p style="font-family: 楷体;margin-bottom: -3px;margin-left: 30px">立方体</p>
                            </a></li>
                            <li role="separator" class="divider"></li>
                            <li style="margin-top:-1px;margin-bottom: -5px"><a href="#">
                                <img src="imgs/圆锥.png" alt="圆锥圆台" width="18" height="18" style="float:left">
                                <p style="font-family: 楷体;margin-bottom: -3px;margin-left: 30px">圆锥/台</p>
                            </a></li>
                            <li role="separator" class="divider"></li>
                            <li style="margin-top:-1px;margin-bottom: -5px"><a href="#">
                                <img src="imgs/圆环.png" alt="圆环" width="18" height="18" style="float:left">
                                <p style="font-family: 楷体;margin-bottom: -3px;margin-left: 30px">圆环</p>
                            </a></li>
                            <li role="separator" class="divider"></li>
                            <li style="margin-top:-1px;margin-bottom: -5px"><a href="#">
                                <img src="imgs/棱锥.png" alt="四棱锥" width="18" height="18" style="float:left">
                                <p style="font-family: 楷体;margin-bottom: -3px;margin-left: 30px">四棱锥/台</p>
                            </a></li>
                        </ul>
                    </li>
                    <!--                齿轮下拉列表-->
                    <li class="dropdown">
                        <a href="#" style="margin-top:-11px; margin-bottom: -6px" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="gear">
                            <img src="imgs/齿轮.png" alt="齿轮" width="20" height="20">
                            <span class="caret"></span>
                            <p style="font-size:15px; margin-left: -5px;margin-top:2px;margin-bottom:-7px;font-family: 楷体">齿轮</p>
                        </a>
                        <ul class="dropdown-menu">
                            <li style="margin-top:-1px;margin-bottom: -5px"><a href="#">
                                <img src="imgs/齿轮.png" alt="齿轮" width="18" height="18" style="float: left">
                                <p style="font-family: 楷体;margin-bottom: -3px;margin-left: 30px">齿轮</p>
                            </a></li>
                        </ul>
                    </li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <!--显示注册和分享的div-->
                    <li><a href="#">
                        <!--加载撤销的logo-->
                        <img src="fonts/return.svg" alt="撤销" title="撤销" height="25" id="return">
                    </a></li>
                    <li><a href="#">
<!--                        前进的logo-->
                        <img src="fonts/continue.svg" alt="前进" title="前进" height="25" id="continue">
                    </a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>
<!--头部-->

<section>
    <div id="workspace">
        <div id="w_left">
            <div style="text-align:left; margin-top:5px;margin-left: 5px">
                <img src="imgs/特征.png" alt="特征" width="25" height="25" style="float: left">
                <p style="font-family: 楷体; font-size: 18px;margin-left: 30px">特征</p>
            </div>
            <div class="row" style="align-items: center;display:flex;justify-content:center;margin-bottom: 10px"> <!--设置子div居中-->
                <div class="col-lg-6" style="width: 80%">
                    <div class="input">
                        <input type="text" class="form-control" placeholder="Search for..." style="font-size: 12px;height: 25px;width:100%;">
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
            <div id="signature">
                <div id="geometry_default">

                    <!--                    菜单-->
                    <div id="treeview1"></div>
                    <!--                    菜单-->

                </div>
            </div>

        </div>
        <!--        w_selection是分隔线-->
        <div id="w_selection"></div>
        <div id="w_right">

            <div id="draft_selection" style="width: 310px; left:45%">
                <!--菜单栏-->
                <!--在这里添加圆角-->
                <nav class="navbar navbar-default" style="border-radius: 10px !important;">
                    <div class="container-fluid">
                        <div class="collapse navbar-collapse ">
                            <ul class="nav navbar-nav">
                                <li><a href="#" style="margin-left: -20px">
                                    <img src="imgs/确认.png" alt="确认" width="25" height="25" title="确认">
                                    <p style="font-family: 楷体;margin-bottom: -6px;margin-left: -1.5px;margin-top: 3px">确认</p>
                                </a></li>
                                <li style="border-right: 2px solid #e0e0e0" ><a href="#">
                                    <img src="imgs/取消.png" alt="取消" width="25“" height="25" title="取消" id="close_draft">
                                    <p style="font-family: 楷体;margin-bottom: -6px;margin-left: -1px;margin-top: 3px">取消</p>
                                </a></li>

                                <li><a href="#">
                                    <img src="imgs/直线.png" alt="直线" width="20" height="20" title="直线" style="margin-left: 13px;margin-top: 3px" >
                                    <p style="font-family: 楷体;margin-bottom: -6px;margin-left: 7px;margin-top: 5px">直线</p>
                                </a></li>
                                <li><a href="#">
                                    <img src="imgs/矩形.png" alt="矩形" width="25" height="25" title="矩形">
                                    <p style="font-family: 楷体;margin-bottom: -6px;margin-left: -1.5px;margin-top: 3px">矩形</p>
                                </a></li>
                                <li><a href="#" style="margin-right: -20px">
                                    <img src="imgs/圆.png" alt="圆" width="20" height="20" title="圆" style="margin-top: 4px">
                                    <p style="font-family: 楷体;margin-bottom: -6px;margin-left: 2px;margin-top: 4px">圆</p>
                                </a></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            </div>
        </div>
    </div>
</section>

<!--*************************着色器*******************************-->
<div class="nav_shader" id="shader">
    <div class="nav-main">
        <h4>
            <img src="imgs/shader/方体_蓝色.png" width="25" height="25" style="opacity: 100">
        </h4>
        <ul>
            <li onclick="shader_operation('edge_coloring')">
                <img src="imgs/ICO/带边着色.ico" width="25" height="25">
                带边着色
            </li>
            <li onclick="shader_operation('no_edge_coloring')">
                <img src="imgs/ICO/不带边着色.ico" width="25" height="25">
                不带边着色
            </li>
            <li onclick="shader_operation('wireframe_mode')">
                <img src="imgs/ICO/线框.ico" width="25" height="25">
                线框模式
            </li>
        </ul>
    </div>
    <div class="nav-main">
        <h4 onclick="shader_operation('resetting_camera')">
            <img src="imgs/shader/上下左右.png" width="43" height="43" title="重置相机视角">
        </h4>
        <ul style="margin-left: -60px; visibility: hidden;">
            <!--                        <li>?</li>-->
            <!--                        <li>?</li>-->
        </ul>
    </div>
    <div class="nav-main">
        <h4>
            <img src="imgs/shader/rotate.png" width="23" height="23">
        </h4>
        <ul style="margin-left: -120px">
            <li onclick="shader_operation('shader_drag')">
                <img src="imgs/shader/拖动.png" width="25" height="25">
                拖动
            </li>
            <li onclick="shader_operation('shader_rotate')">
                <img src="imgs/shader/旋转.png" width="25" height="25">
                旋转
            </li>
            <li onclick="shader_operation('shader_shrink')">
                <img src="imgs/shader/放缩.png" width="25" height="25">
                放缩
            </li>
        </ul>
    </div>
</div>
<!--************************着色器***************************-->

<footer>

</footer>

<!--bootstrap.js 依赖于jQuery.js，注意添加的顺序-->
<!--由于Bootstrap的JS插件依赖JQuery，所以引入JQuery-->
<script type="text/javascript" src="lib/jquery.min.js"></script>
<!--引入所有的Bootstrap的JS插件-->
<script type="text/javascript" src="lib/bootstrap.js"></script>
<script type="text/javascript" src="lib/bootstrap-treeview.js"></script>
<!--自己的脚本文件-->
<script type="text/javascript" src="js/draft_prompt.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/pull_tree.js"></script>
<script type="text/javascript" src="js/shader.js"></script>
<!--<script src="js/three.js"></script>-->
<!--<script type="text/javascript"  src="js/TrackballControls.js"></script>-->
<script type="module" src="js/webcad.js"></script>


<script type="text/javascript" src="js/Mouse_right_Message.js"></script>

</body>
</html>
